import React, { useState } from 'react';
import { cc } from '@/utils';
import { history } from '@@/core/history';

import s from './index.less';
import Primary from '@/components/Primary';

const Index: React.FC = () => {
  const [currentTab, setCurrentTab] = useState<Button>('primary');

  const getCurrentBlock = (): React.ReactNode => {
    // switch (currentTab) {
    //   case 'primary':
    //     return <Primary currentTab={currentTab} />;
    //   case 'middle':
    //     return <Middle />;
    //   case 'senior':
    //     return <Senior />;
    // }
    return <Primary currentTab={currentTab} />;
  };

  return (
    <section className={s.page_wrapper}>
      <img src={require('@/static/record-btn.png')} onClick={() => {
        history.push('/record');
      }} className={s.aside_btn} alt='' />
      <section className={s.btn_group}>
        <button
          onClick={() => setCurrentTab('primary')}
          className={cc(currentTab === 'primary' && s.btn_active)}
        >
          初级
        </button>
        <button
          onClick={() => setCurrentTab('middle')}
          className={cc(currentTab === 'middle' && s.btn_active)}
        >
          中级
        </button>
        <button
          onClick={() => setCurrentTab('senior')}
          className={cc(currentTab === 'senior' && s.btn_active)}
        >
          高级
        </button>
      </section>
      {
        getCurrentBlock()
      }

    </section>
  );
};

export default Index;
